<template>
  <div class="_wrap">
    <div class="_top">
      <div class="item" v-for="(item, i) in totalArr" :key="i">
        <div class="icon"><img :src="item.ico"></div>
        <div class="info">
          <div class="label">{{item.label}}({{item.unit}})</div>
          <div class="value"><count-to ref="countTo" class="val" :start-val="0" :end-val="item.value" :duration="3600" /></div>
        </div>
      </div>
    </div>
    <div class="_bottom">
      <div class="item" v-for="(item, i) in analysisArr">
        <div class="_t">
          <div class="label">{{item.label}}:</div>
          <div class="value"><count-to class="val" :start-val="0" :end-val="item.value" :duration="3600" /><span class="unit">(个)</span></div>
        </div>
        <div class="_c">
          <div class="_item" v-for="(obj,index) in item.list" :key="index"
               :style="{backgroundColor: color[index], width: formatWidth(obj.value,item.list)}" ></div>
        </div>
        <div class="_b">
          <div class="_item" v-for="(obj,index) in item.list" :key="index"><i :style="{backgroundColor: color[index]}"></i>{{obj.label}}: <font>{{obj.value}}</font>个</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import countTo from 'vue-count-to'
  export default {
    name: 'itemCenterTop',
    components: { countTo },
    data() {
      return {
        interval: null,
        totalArr: [
          { ico: require('@/assets/img/icon1.svg'), label: '学校数', value: 343, unit: '所' },
          { ico: require('@/assets/img/icon2.svg'), label: '学生数', value: 124932, unit: '人' },
          { ico: require('@/assets/img/icon3.svg'), label: '班级数', value: 3103, unit: '个' },
          { ico: require('@/assets/img/icon4.svg'), label: '教师数', value: 14098, unit: '人' }
        ],
        color: ['#3B9DF7', '#00FFFA', '#FFB936'],
        analysisArr: [
          {
            ico: '零', label: '零星工程', value: 121,
            list: [
              { label: '待审', value: 22 },
              { label: '在建', value: 34 },
              { label: '完工', value: 65 }
            ],
            dsVal: 10, zjVal: 10, wgVal: 10
          },
          {
            ico: '专', label: '专项改造', value: 85,
            list: [
              { label: '待审', value: 35 },
              { label: '在建', value: 27 },
              { label: '完工', value: 23 }
            ],
            dsVal: 10, zjVal: 10, wgVal: 10
          },
          {
            ico: '前', label: '前期项目', value: 163,
            list: [
              { label: '待审', value: 23 },
              { label: '在建', value: 75 },
              { label: '完工', value: 65 }
            ],
            dsVal: 10, zjVal: 10, wgVal: 10
          },
          {
            ico: '实', label: '实施项目', value: 146,
            list: [
              { label: '待审', value: 23 },
              { label: '在建', value: 81 },
              { label: '完工', value: 42 }
            ],
            dsVal: 10, zjVal: 10, wgVal: 10
          }
        ]
      }
    },
    beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
    mounted() {
      this.handleStart()
    },
    methods: {
      handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          for (let i = 0; i < this.$refs.countTo.length; i++){
            this.$refs.countTo[i].start()
          }
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      },
      formatWidth(val, arr){
        let total = _.sumBy(arr, 'value')
        return (val / total).toFixed(4) * 100 + '%'
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    ._top {
      display: flex; align-items: center; justify-content: space-between;
      .item {
        display: flex; align-items: center;
        .icon {
          width: 72px; height: 72px; position: relative;
          display: flex; align-items: center; justify-content: center;
          &::before {
            content: ''; display: block; position: absolute; z-index: 1;
            width: 100%; height: 100%; background: url('~@/assets/img/iconBg.svg') no-repeat;
            animation: rotate 10s linear infinite;
          }
          img { width: 32px; display: block; position: relative; z-index: 33; }
          @keyframes rotate {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
        }
        .info {
          margin-left: 10px;
          .label { font-size: 20px; font-family: PingFangSC; letter-spacing: 1.2px; font-weight: bold; }
          .value {
            font-size: 36px; color: #00FFFA; font-family: DINPro; letter-spacing: 2.16px;
          }
        }
      }
    }
    ._bottom {
      margin-top: 20px;
      display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px;
      .item {
        background: rgba(0,16,43,0.32); padding: 16px 20px;
        border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .2), rgba(8,132,255,1)) 1;
        ._t {
          display: flex; align-items: center; font-size: 22px; font-family: PingFangSC;
          .label { font-size: 20px; font-family: DingTalk; letter-spacing: 0.83px; }
          .value {
            margin-left: 15px; font-size: 18px;
            .val { font-size: 26px;  color: #00FFFA; font-family: DINPro; }
            .unit { font-family: PingFangSC; font-size: 20px; }
          }
        }
        ._c {
          height: 16px; border: 1px solid rgba(59,157,247,0.5); border-radius: 5px; margin-top: 12px;
          padding: 5px 2px; display: flex; align-items: center;
          ._item {
            width: auto; height: 100%;
            &:nth-child(2) {margin: 0 2px}
          }
        }
        ._b {
          display: flex; align-items: center; justify-content: space-between;
          padding-top: 10px;
          color: rgba(255,255,255,.72); font-size: 16px;
          div._item {
            display: flex; align-items: center; font-family: PingFangSC;
            i { display: inline-block; width: 6px; height: 6px; margin-right: 8px;}
            font { padding: 0 8px; font-size: 18px;  color: #fff; font-family: DINPro; }
          }
        }

      }
    }
  }
</style>
